<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>WinHolderService</title>
    <link rel="shortcut icon" href="../image/app_icon.png" type="image/png">
    <link rel="bookmark" href="../image/app_icon.png">
    <link rel="stylesheet" href="../component/SimpleDialog.css">
    <style>
      button {
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        border: 0;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        font-family: "comic sans ms";
        font-size: 15px;
        /*禁止长按选中文本,移动端可能无效果*/
        user-select: none;
        -ms-user-select: none; /* IE 11 */
        -webkit-user-select: none; /* Chrome/Safari */
        -moz-user-select: none; /* Firefox */
      }

      button:active, .activeButton {
        box-shadow: 0 4px 8px 0 rgba(79, 239, 239, 61), 0 3px 10px 0 rgba(0, 255, 255, 61) !important;
        border: 0 !important;
      }

      .touchpadButton button {
        width: 12vw;
        height: 68px;
        margin: 1px 2px;
      }

      .keyButtonGrid {
        display: grid;
        grid-template-rows: repeat(3, 45px);
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 3px 5px;
      }

      .mediaButton {
        letter-spacing: -2px;
        font-size: 12px;
        font-weight: bold;
      }
    </style>
</head>
<body style="margin: 0; padding: 0;overflow: hidden">

<div id="app" style="height: 100vh; width: 100vw;">
    <!--基础按键+触摸板-->
    <div style="display: grid; grid-template-rows: auto 1fr; height: 100vh;"
         v-show="!showKeyboard">
        <!--发送文本 搁置-->
        <div style="display: flex; height: 60px; margin-bottom: 5px" v-show="0">
        <textarea ref="txtInput" style="flex-grow: 1; margin-right: 5px; resize: none;"
                  v-model="inputText"></textarea>
            <button style="width: 12vw;">发送</button>
        </div>
        <!--功能按钮-->
        <div class="keyButtonGrid">
            <!--row1-->
            <button keyCode="0x1B">Esc</button>
            <span></span>
            <button keyCode="0x26">↑</button>
            <span></span>
            <button keyCode="0x08" style="line-height: 13px">back<br/>←</button>
            <button keyCode="SPECIAL:0xB3" class="mediaButton">▶/║</button>
            <!--row2-->
            <button keyCode="0x10">shift</button>
            <button keyCode="0x25">←</button>
            <button keyCode="0x28">↓</button>
            <button keyCode="0x27">→</button>
            <button keyCode="0x0a">Enter</button>
            <button keyCode="SPECIAL:0xB1" class="mediaButton">┃◀◀</button>
            <!--row3-->
            <button keyCode="0x11">ctrl</button>
            <button keyCode="0x020C">Win</button>
            <button keyCode="0x20" style="grid-column: 3/5">空格</button>
            <!--win最近应用: ctrl+akt+tab-->
            <button keyCode="0x11,0x12,0x09">apps</button>
            <button keyCode="SPECIAL:0xB0" class="mediaButton">▶▶┃</button>
        </div>
        <div class="touchpadButton" style="position: absolute; bottom: 3px">
            <button @click="toFullScreen()">全屏</button>
        </div>
        <!--触摸板-->
        <h-touchpad ref="touchpadBig" style="margin-top: 10px;"
                    :on-touchpad-event="onTouchpadEvent" :on-scroll-event="onScrollEvent">
        </h-touchpad>
    </div>
    <!--全屏键盘-->
    <h-keyboard ref="hKeyboard" v-show="showKeyboard"
                :on-touchpad-event="onTouchpadEvent" :on-scroll-event="onScrollEvent">
    </h-keyboard>
</div>
<script type="module" src="../view/control.js"></script>
</body>
</html>